<template>
  <div class="min-h-screen bg-gradient-to-br">

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        <!-- 左侧区域 (25%) -->
        <div class="lg:col-span-3 space-y-6 sticky lg:top-36 self-start max-h-[calc(100vh-5rem)] overflow-y-auto">
        </div>

        <!-- 中间区域 (50%) -->
        <div class="lg:col-span-6 space-y-6">
          <!-- 用户帖子列表 -->
          <PostList pageType="postDetail" :postId="this.postId" :userId="this.userId" :communityId=null />

          <!-- 帖子的评论区 -->
          <CommentSection :postId="postId" />
        </div>

        <!-- 右侧区域 (25%) -->
        <div class="lg:col-span-3 space-y-6 sticky lg:top-36 self-start max-h-[calc(100vh-5rem)] overflow-y-auto">
          <!-- 最近热门的帖子列表 -->
          <HotPostList />
        </div>

      </div>
    </main>

  </div>
</template>

<script>


import PostList from "@/components/PostList.vue";
import UserInfoCard from "@/components/UserInfoCard.vue";
import CommentSection from "@/components/CommentSection.vue";
import HotPostList from "@/components/HotPostList.vue";

export default {
  name: "PostDetail",
  components: { PostList, UserInfoCard, CommentSection, HotPostList },
  data() {
    return {
      userId: null,
      postId: null
    };
  },
  created() {
    // 从路由query参数中获取ID，支持直接URL访问
    this.userId = this.$route.query.userId || this.$route.params.userId || "default";
    this.postId = this.$route.query.postId || this.$route.params.postId || "default";
    console.log("帖子详情页 - 用户ID:", this.userId, "帖子ID:", this.postId);
  },
  watch: {
    // 监听路由参数变化
    '$route.query': function () {
      this.userId = this.$route.query.userId || this.$route.params.userId || "default";
      this.postId = this.$route.query.postId || this.$route.params.postId || "default";
      console.log("路由变化 - 用户ID:", this.userId, "帖子ID:", this.postId);
    }
  },
  methods: {
    handleFollowUser(userId) {
      console.log("关注用户:", userId);
      // TODO: 实现关注用户的API调用
      // 这里可以添加关注用户的逻辑，例如调用API

    }
  }
};
</script>